<template>
  <div class="layout">
    <el-container>
      <el-aside width="200px">
        <div class="logo">
          <img src="../assets/logo.png" alt="" />
          <span>Manager</span>
        </div>
        <div class="menu">
          <el-menu
            :default-active="$route.path"
            router
            background-color="#001529"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <item :menuList='menuList'></item>
          </el-menu>
        </div>
      </el-aside>
      <el-container class="container">
        <el-header>
          <div class="left">
            <i class="el-icon-s-fold left-icon"></i>
            <div class="nav">
              <nav-menu></nav-menu>
            </div>
          </div>
          <div class="right">
            <i class="el-icon-bell right-icon"></i>
            <el-dropdown @command="handleClick">
              <span class="el-dropdown-link user">
                {{ userName }}
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="email">{{
                  "邮箱 : " + userEmail
                }}</el-dropdown-item>
                <el-dropdown-item command="goBack">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Item from './Item.vue';
import navMenu from "./navMenu.vue";
import storage from '@/utils/storage'
import store from '../store/index'
export default {
  components: { navMenu, Item },
  data() {
    return {
        menuList: [],
        userName: store.state.userInfo.userName || '',
        userEmail: store.state.userInfo.userEmail || '',
    };
  },
  created() {
      this.getMenuList();
  },
  methods: {
      async getMenuList() {
          let res = await this.userApi.getMenuList();
          this.menuList = res.menuList
          this.$store.commit('saveMenuList', res.menuList)
          this.$store.commit('saveActionList', res.actionList)
      },
      handleClick(val){
        switch (val) {
          case 'email' :
            console.log('邮箱');
            break;
          case 'goBack' :
            this.goBack();
            break;
        }
      },
      goBack() {
        this.$store.commit('saveToken', null);
        this.$store.commit('saveUserInfo', null);
        this.$store.commit('saveMenuList', null);
        this.$store.commit('saveActionList', null);
        storage.clearAll();
        this.$message.success({
          message: '退出成功',
          offset: 80
        })
        this.$router.push('/login');
      }
  },
};
</script>

<style scoped lang="scss">
.layout {
  position: absolute;
  width: 100%;
  height: 100%;
  .el-container {
    width: 100%;
    height: 100%;
    .el-aside {
      height: 100%;
      background-color: #001529;
      overflow-y: auto;
      .logo {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        img {
          width: 35px;
          height: 30px;
          margin: 0 15px;
        }
        span {
          font-size: 18px;
          color: #fff;
        }
      }
      .el-menu{
          border-right: none;
      }
    }
    .container {
      overflow-y: auto;
      .el-header {
        width: 100%;
        height: 50px !important;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        .left {
          display: flex;
          align-items: center;
          .left-icon {
            font-size: 20px;
            margin-right: 20px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .right-icon {
            font-size: 18px;
            margin-right: 20px;
          }
          .user {
            color: #409eff;
            font-size: 14px;
          }
        }
      }
      .el-main {
        width: 100%;
        background-color: #eef0f3;
        overflow-y: auto;
      }
    }
  }
}
</style>
